<template>
	<view class="picker-overlay" @click="cancel">
		<view class="picker-content" @click.stop>
			<view class="picker-title">选择营业时间</view>
			{{time}}
			<view class="time-row">
				<text>开始时间：</text>
				<input type="time" v-model="time.start" class="time-input" />
			</view>
			<view class="time-row">
				<text>结束时间：</text>
				<input type="time" v-model="time.end" class="time-input" />
			</view>
			<view class="picker-buttons">
				<button @click="confirm">确定</button>
				<button @click="cancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			start: {
				type: String,
				default: ''
			},
			end: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				time: {
					start: this.start,
					end: this.end,
				},
			};
		},
		methods: {
			confirm() {
				this.$emit('confirm', {
					...this.time
				});
			},
			cancel() {
				this.$emit('cancel');
			},
		},
	};
</script>

<style scoped>
	.picker-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: flex-end;
	}

	.picker-content {
		background: #fff;
		width: 100%;
		padding: 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.picker-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.picker-options {
		max-height: 300px;
		overflow-y: auto;
	}

	.picker-option {
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		font-size: 16px;
	}

	.picker-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.picker-buttons button {
		flex: 1;
		margin: 0 5px;
		padding: 10px 0;
		background: #65c61d;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}
</style>